<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/swiper.css">
		<script src="js/swiper.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: #000;
			}
			body{
				background: url(img/bg1.png);
			}
			.navbg{
				width: 100%;
				background-color: #9bba9a;
			}
			.nav{
				width: 960px;
				margin: 0 auto;
				padding: 10px 0;
			}
			.nav .list{
				display: flex;
				justify-content: space-between;
			}
			.nav .list li{
				display: flex;
				align-items: center;
			}
			.nav .list img{
				width: 30px;
				height: 30px;
				padding: 5px ;
			}
			.swiper-container{
				width: 100%;
				position: relative;
			}
			.swiper-container img{
				width: 100%;
				height: 800px;
			}
			.swiper-container .bantext{
				padding: 30px 20px;
				width: 180px;
				position: absolute;
				text-align: center;
				left: 350px;
				bottom: 80px;
			}
			
			.bantext h2{
				color: #8d502b;
				font-size: 40px;
				font-weight: normal;
				text-align: center;
			}
			.bantext ul{
				display: flex;
				justify-content: center;
			}
			.bantext ul li{
				width: 14px;
				color: #8d502b;
				font-size: 16px;
				padding: 5px;
				text-align: center;
			}
			.xiangq{
				width: 100%;
				position: relative;
			}
			.xiangq img{
				width: 100%;
			}
			.xqtext {
				position: absolute;
				top: 150px;
				right: 150px;
				font-size: 30px;
				color: #fff;
			}
			.listi{
				width: 960px;
				display: flex;
				margin: 20px auto;
				justify-content: space-between;
			}
			.listi li{
				width: 30%;
			}
			.listi li img{
				width: 100%;
			}
			.footer{
				padding: 30px 0;
				width: 100%;
				background-color: #9bba9a;
				text-align: center;
			}
		</style>
		<link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
		<audio autoplay="autoplay" loop="loop">
			<source src="aduio/1.mp3"></source>
		</audio>
		<div class="navbg">
			<div class="nav">
				<ul class="list">
					<li><img src="img/logo.png" style="width: 200px;height: auto;"></li>
					<li><img src="img/tu.png"><a href="index.html">首页</a></li>
					<li><img src="img/tu.png"><a href="two.html">寻茶之旅</a></li>
					<li><img src="img/tu.png"><a href="#">茶语学堂</a></li>
					<li><img src="img/tu.png"><a href="#">我的</a></li>
					<li><img src="img/tu.png"><a href="#">登录/注册</a></li>
				</ul>
			</div>
		</div>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div style="background: url(img/bg1.png);" class="swiper-slide">
					<img src="img/11.png"/>
					<div class="bantext">
						
						<h2>茶•寻觅</h2>
						<ul>
							<li>茶文化的交流学院</li>
							<li>茶友的秘密花园</li>
							<li>赴一场以茶为媒的约</li>
							<li>在这里</li>
							<li>赏花语人生</li>
							<li>品茗谈天地</li>
							
							
						</ul>
					</div>
				</div>
		        <div class="swiper-slide"><img src="img/bang3.png"></div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		
		</div>
		<h1 style="text-align: center; margin: 20px 0;">传承茶文化</h1>
		<ul class="listi">
			<li><img src="img/wen1.jpg"></li>
			<li><img src="img/wen2.jpg"></li>
			<li><img src="img/wen3.jpg"></li>
		</ul>
		<div class="xiangq">
			<img src="img/xiangqing.png">
			<div class="xqtext">
				Kung Fu Tea Set<br>
				功夫茶具套装<br>
				￥789.00
			</div>
		</div>
		<div class="footer">
			版权所属© 2020荟茗居
		</div>
		<script>
			var mySwiper = new Swiper ('.swiper-container', {
			  direction: 'horizontal', // 垂直切换选项
			  loop: true, // 循环模式选项
			   effect : 'fade',
			  // 如果需要分页器
			  pagination: {
			    el: '.swiper-pagination',
					clickable :true,
			  },
			
			  
			})
		</script>
	</body>
</html>
